<!--
 * @Author: ReinerLau lk850593913@gmail.com
 * @Date: 2022-11-08 12:55:00
 * @LastEditors: ReinerLau lk850593913@gmail.com
 * @LastEditTime: 2022-12-02 16:31:34
 * @FilePath: \v2.0.0\src\views\inspection\components\CreatePathDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { ref, reactive, toRefs } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { inspectionRoute } from "@/api/inspection/map-setting";

// 接收props
const props = defineProps({
  visible: { type: Boolean, default: false },
  formData: { type: Object, default: () => ({}) },
});
const { visible, formData } = toRefs(props);
const emit = defineEmits(["update:visible", "getPathData"]);

// 关闭弹窗
function onCloseDialog() {
  emit("update:visible", false);
  emit("getPathData");
  ruleFormRef.value.resetFields();
}

// 表单校验规则
const ruleFormRef = ref();
const rules = reactive({
  name: { required: true, message: "该选项不能为空", trigger: "blur" },
});

async function onSubmit(formEl) {
  if (!formEl) return;
  // 表单校验
  await formEl.validate(async (valid) => {
    if (valid) {
      await ElMessageBox.confirm("确认继续操作吗", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      });
      const { message } = await inspectionRoute.create(formData.value);
      ElMessage({ type: "success", message });
      onCloseDialog();
    } else {
      // console.log(fields);
    }
  });
}
</script>

<template>
  <el-dialog
    :model-value="visible"
    title="创建路径"
    width="500px"
    top="36vh"
    :close-on-click-modal="false"
    :show-close="false"
    @close="onCloseDialog()"
  >
    <el-form
      ref="ruleFormRef"
      :rules="rules"
      :model="formData"
      label-width="100px"
      label-suffix="："
    >
      <el-form-item label="路径名称" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit(ruleFormRef)">
          确认
        </el-button>
        <el-button @click="onCloseDialog">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
